<template>
  <div class='list bc-white'>
    <ul>
      <li v-for="(item,index) in formatListData" class="active clearB" :key="index" @click="showDetail(item,index)">
        <p class="title">{{item.title}}  <img :src="item.collect?img_collected:img_active" alt="" class="active fr" @click.stop="setCollect(item)"></p>
        <p class="jobs"><span v-for="(job,jobIndex) in item.posts">{{job.name}}</span></p>
        <p class="pr"><span>发布时间：{{item.pubtime}}</span></p>

        <Detail class="more-info" :info="item" />
        <p class="arrow"><img :src="item.isShow?arrow_top:arrow_bottom" alt=""></p>
      </li>
    </ul>
    <p class="no-data" v-if="formatListData.length===0">暂时没有数据哦~</p>
  </div>
</template>
<script>
import Detail from './detail.vue'
export default {
  props:['listData','routerDetail'],
  components: {Detail},
  name: "",
  data() {
    return {
      img_active:require('../../../../../assets/images/home/icon-collected.png'),
      img_collected:require('../../../../../assets/images/home/icon-collected-s.png'),
      arrow_top:require('../../../../../assets/images/home/arrow-top.png'),
      arrow_bottom:require('../../../../../assets/images/home/arrow-bottom.png'),
    };
  },
  computed:{
    formatListData(){
      return this.listData||[]
    }
  },
  methods: {
    showDetail(item,index){
      this.$set(item,'isShow',!item.isShow)
      item.isShow?$('.more-info').eq(index).slideDown():$('.more-info').eq(index).slideUp()

      // if(this.routerDetail)this.routerDetail(item)
    },

    /**
     * @name 设置收藏
     */
    setCollect(item){
      var params={
        id:item.id,
        type:2
      }
      _g.apiPost('job/jobCollect',params).then(res=>{
        _g.toMessage(res)
        if(!res.error){
          this.$set(item,'collect',!item.collect)
        }
      })
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
@import "../../workstudy/model/list.scss";
.jobs{
  span{
    display: inline-block;
    width: auto;
    height: 50px;
    padding: 10px;
    margin: 10px 20px 10px 0;
    line-height: 50px;
    color: #00998d;
    background-color: #BAE3E0;
    box-sizing: border-box;
    line-height: 30px;
    border-radius: 4px;
    font-size: 13px;
  }
}
.more-info{
  // margin-top: 5px;
  box-sizing: border-box;
}
</style>